<!--
 * @Date: 2022-03-17 11:07:03
 * @Author: 陶子
 * @LastEditTime: 2023-07-04 10:33:06
 * @FilePath: \jk_one-stop_pc\src\views\warehouseManagement\inventoryQuery\outAndInDetail.vue
 * @pageName: 这是--(出入库查询——详情)--页面
-->
<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['仓库管理', '库管任务', '出入库查询']" currentMenu="详情"> </crumbs>
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="wrapLeft">
          <div class="detail-item">
            <p class="subtitle">{{ detailType == 'outStock' ? '出库单' : '入库单' }}</p>
            <p class="secondary-text">{{ detailInfo.orderNumber || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">任务标题</p>
            <p class="secondary-text pubColor">{{ detailInfo.taskName || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">提交时间</p>
            <p class="secondary-text">{{ detailInfo.createTime || '-' }}</p>
          </div>
        </div>
        <div class="wrapRight">
          <div class="detail-item">
            <p class="subtitle"></p>
            <p class="secondary-text"></p>
          </div>
        </div>
      </div>
      <div class="item-wrap">
        <div class="wrapLeft">
          <div class="detail-item">
            <p class="subtitle">{{ detailType == 'outStock' ? '出库类型' : '入库类型' }}</p>
            <p class="secondary-text">{{ detailInfo.operateTaskType }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">{{ detailType == 'outStock' ? '出库原因' : '入库原因' }}</p>
            <p class="secondary-text">{{ detailInfo.remark }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle"></p>
            <p class="secondary-text" style="color: #1890ff; font-size: 16px"></p>
          </div>
        </div>

        <div class="wrapRight">
          <div class="detail-item">
            <p class="subtitle"></p>
            <p class="secondary-text" style="color: #1890ff; font-size: 16px"></p>
          </div>
        </div>
      </div>
      <div class="item-wrap">
        <div class="wrapLeft">
          <div class="detail-item" style="width: 100%">
            <p class="subtitle">附件</p>
            <file-detail :ids="detailInfo.dingFileInfo"></file-detail>
          </div>
        </div>
        <div class="wrapRight">
          <div class="detail-item">
            <p class="subtitle"></p>
            <p class="secondary-text" style="color: #1890ff; font-size: 16px"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="cards-box">
      <div>
        <a-card :title="detailType == 'outStock' ? '出库信息' : '入库信息'" :bordered="false" style="margin-top: 12px">
          <div class="item-wrap" style="box-sizing: border-box; padding: 0 4px">
            <div class="wrapLeft">
              <div class="detail-item">
                <p class="subtitle">{{ detailType == 'outStock' ? '出库人' : '入库人' }}</p>
                <p class="secondary-text">{{ detailInfo.operateUserName || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">{{ detailType == 'outStock' ? '出库仓库' : '入库仓库' }}</p>
                <p class="secondary-text">{{ detailInfo.warehouseName || '-' }}</p>
              </div>
              <div class="detail-item">
                <p class="subtitle">{{ detailType == 'outStock' ? '出库日期' : '入库日期' }}</p>
                <p class="secondary-text">{{ detailInfo.operateTime || '-' }}</p>
              </div>
            </div>
            <div class="wrapRight">
              <div class="detail-item">
                <p class="subtitle"></p>
                <p class="secondary-text" style="color: #1890ff; font-size: 16px"></p>
              </div>
            </div>
          </div>
        </a-card>
        <a-card :bordered="false" :title="detailType == 'outStock' ? '出库明细' : '入库明细'" style="margin-top: 12px">
          <a-table
            size="middle"
            :scroll="{ x: 'calc(100vw - 304px)', y: 'calc(100vh - 520px)' }"
            rowKey="id"
            :columns="tableColumns"
            :dataSource="reportList"
            :pagination="false"
            class="j-table-force-nowrap"
          >
            <span
              slot="goodsQualifiedNum"
              slot-scope="text, record"
              :title="`${record.goodsQualifiedNum}${record.assistUnit}`"
              >{{ `${record.goodsQualifiedNum}${record.assistUnit}` }}</span
            >
            <span
              slot="goodsScrapNum"
              slot-scope="text, record"
              :title="`${record.goodsScrapNum}${record.assistUnit}`"
              >{{ `${record.goodsScrapNum}${record.assistUnit}` }}</span
            >
            <span slot="isDeleteText" slot-scope="text, record" :title="record.isDeleteText" :class="record.isDeleteText ? 'haveDelete' : ''">{{record.isDeleteText || '-'}}</span>
          </a-table>
          <div class="uni-card" style="padding: 20px 24px 0 24px">
            <div style="display: inline-block">共{{ reportPagination.total }}条</div>
            <div style="display: inline-block; float: right">
              <a-pagination
                :total="reportPagination.total"
                v-model="reportPagination.current"
                :page-size-options="pageSizeOptions"
                :page-size="reportPagination.pageSize"
                @change="onChangePage"
                @showSizeChange="onShowSizeChange"
                show-quick-jumper
                show-size-changer
              />
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </jke-modal>
</template>
<script>
import moment from 'moment'
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { queryByIdApi, queryListApi } from '@/api/erpApi'
import { API } from '@/api/requestFzs'
export default {
  data() {
    return {
      jkeForm: {
        title: '出入库查询详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      moment,
      parentId: '',
      detailInfo: {},
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      //出库列表
      tableColumns: [
        {
          title: '物品编号',
          dataIndex: 'goodsCode',
          align: 'left',
          width: '120px',
          ellipsis: true,
        },
        {
          title: '物品名称',
          dataIndex: 'goodsName',
          align: 'left',
          width: '120px',
          ellipsis: true,
        },
        {
          title: '规格',
          dataIndex: 'spec',
          align: 'left',
          width: '120px',
          ellipsis: true,
        },
        {
          title: '出库合格品',
          dataIndex: 'goodsQualifiedNum',
          align: 'left',
          ellipsis: true,
          width: '150px',
          scopedSlots: {
            customRender: 'goodsQualifiedNum',
          },
        },
        {
          title: '出库报废品',
          dataIndex: 'goodsScrapNum',
          align: 'left',
          ellipsis: true,
          width: '150px',
          scopedSlots: {
            customRender: 'goodsScrapNum',
          },
        },

        {
          title: '含税单价（元）',
          dataIndex: 'unitPriceInclusiveTaxText',
          align: 'left',
          ellipsis: true,
          width: '150px',
          scopedSlots: {
            customRender: 'unitPriceInclusiveTaxText',
          },
        },
        {
          title: '税率（%）',
          dataIndex: 'taxRate',
          align: 'left',
          ellipsis: true,
          width: '150px',
          scopedSlots: {
            customRender: 'taxRate',
          },
        },
        {
          title: '不含税单价（元）',
          dataIndex: 'unitPriceExcludingTaxText',
          align: 'left',
          ellipsis: true,
          width: '150px',
          scopedSlots: {
            customRender: 'unitPriceExcludingTaxText',
          },
        },
        {
          title: '含税金额（元）',
          dataIndex: 'amountInclusiveTaxText',
          align: 'left',
          ellipsis: true,
          width: '150px',
          scopedSlots: {
            customRender: 'amountInclusiveTaxText',
          },
        },
        {
          title: '不含税金额（元）',
          dataIndex: 'amountExcludingTaxText',
          align: 'left',
          ellipsis: true,
          width: '150px',
          scopedSlots: {
            customRender: 'amountExcludingTaxText',
          },
        },

        {
          title: '出库合格品(F)',
          dataIndex: 'goodsQualifiedNumTextAssistUnit',
          align: 'left',
          ellipsis: true,
          width: '250px',
          scopedSlots: {
            customRender: 'goodsQualifiedNumTextAssistUnit',
          },
        },
        {
          title: '出库报废品(F)',
          dataIndex: 'goodsScrapNumTextAssistUnit',
          align: 'left',
          ellipsis: true,
          width: '250px',
          scopedSlots: {
            customRender: 'goodsScrapNumTextAssistUnit',
          },
        },
        {
          title: '明细是否删除',
          dataIndex: 'isDeleteText',
          align: 'left',
          width: '120px',
          ellipsis: true,
          scopedSlots: {
            customRender: 'isDeleteText',
          },
        },
      ],
      reportList: [],
      reportPagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      detailType: '',
    }
  },
  components: {
    crumbs,
    FileDetail,
  },
  created() {},
  methods: {
    //获取报工记录数据
    getReportData(obj) {
      queryListApi(obj).then((res) => {
        if (res.success) {
          if (res.result.total) {
            this.reportPagination.total = res.result.total
          } else {
            this.reportPagination.total = 0
          }
          this.reportList = res.result.records
          console.log(this.reportList, '---this.reportList')
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    // pageNo 改变
    onChangePage(current, pageSize) {
      this.reportPagination.current = current
      let reportObj = {
        id: this.parentId,
        pageNo: this.reportPagination.current,
        pageSize: this.reportPagination.pageSize,
      }
      this.getReportData(reportObj)
    },
    // pageSize 改变
    onShowSizeChange(current, pageSize) {
      this.reportPagination.current = 1
      this.reportPagination.pageSize = pageSize
      let reportObj = {
        id: this.parentId,
        pageNo: this.reportPagination.current,
        pageSize: this.reportPagination.pageSize,
      }
      this.getReportData(reportObj)
    },
    /* 分割线 */

    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initDetail(query) {
      this.jkeForm.visible = true
      this.detailType = query.detailType
      this.parentId = query.id
      if (this.detailType == 'outStock') {
        // this.tableColumns[3].title = '本单出库合格品'
        // this.tableColumns[4].title = '本单出库报废品'

        // this.tableColumns[10].title = '本单出库合格品(F)'
        // this.tableColumns[11].title = '本单出库报废品(F)'
        this.tableColumns = [
          {
            title: '物品编号',
            dataIndex: 'goodsCode',
            align: 'left',
            width: '120px',
            ellipsis: true,
          },
          {
            title: '物品名称',
            dataIndex: 'goodsName',
            align: 'left',
            width: '120px',
            ellipsis: true,
          },
          {
            title: '规格',
            dataIndex: 'spec',
            align: 'left',
            width: '120px',
            ellipsis: true,
          },
          {
            title: '本单出库合格品',
            dataIndex: 'goodsQualifiedNum',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'goodsQualifiedNum',
            },
          },
          {
            title: '本单出库报废品',
            dataIndex: 'goodsScrapNum',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'goodsScrapNum',
            },
          },

          {
            title: '不含税单价（元）',
            dataIndex: 'unitPriceExcludingTaxText',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'unitPriceExcludingTaxText',
            },
          },

          {
            title: '不含税金额（元）',
            dataIndex: 'amountExcludingTaxText',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'amountExcludingTaxText',
            },
          },

          {
            title: '本单出库合格品(F)',
            dataIndex: 'goodsQualifiedNumTextAssistUnit',
            align: 'left',
            ellipsis: true,
            width: '250px',
            scopedSlots: {
              customRender: 'goodsQualifiedNumTextAssistUnit',
            },
          },
          {
            title: '本单出库报废品(F)',
            dataIndex: 'goodsScrapNumTextAssistUnit',
            align: 'left',
            ellipsis: true,
            width: '250px',
            scopedSlots: {
              customRender: 'goodsScrapNumTextAssistUnit',
            },
          },
          {
            title: '明细是否删除',
            dataIndex: 'isDeleteText',
            align: 'left',
            width: '120px',
            ellipsis: true,
            scopedSlots: {
              customRender: 'isDeleteText',
            },
          },
        ]
      } else {
        // this.tableColumns[3].title = '本单入库合格品'
        // this.tableColumns[4].title = '本单入库报废品'

        // this.tableColumns[10].title = '本单入库合格品(F)'
        // this.tableColumns[11].title = '本单入库报废品(F)'
        this.tableColumns = [
          {
            title: '物品编号',
            dataIndex: 'goodsCode',
            align: 'left',
            width: '120px',
            ellipsis: true,
          },
          {
            title: '物品名称',
            dataIndex: 'goodsName',
            align: 'left',
            width: '120px',
            ellipsis: true,
          },
          {
            title: '规格',
            dataIndex: 'spec',
            align: 'left',
            width: '120px',
            ellipsis: true,
          },
          {
            title: '本单入库合格品',
            dataIndex: 'goodsQualifiedNum',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'goodsQualifiedNum',
            },
          },
          {
            title: '本单入库报废品',
            dataIndex: 'goodsScrapNum',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'goodsScrapNum',
            },
          },

          {
            title: '含税单价（元）',
            dataIndex: 'unitPriceInclusiveTaxText',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'unitPriceInclusiveTaxText',
            },
          },
          {
            title: '税率（%）',
            dataIndex: 'taxRate',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'taxRate',
            },
          },
          {
            title: '不含税单价（元）',
            dataIndex: 'unitPriceExcludingTaxText',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'unitPriceExcludingTaxText',
            },
          },
          {
            title: '含税金额（元）',
            dataIndex: 'amountInclusiveTaxText',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'amountInclusiveTaxText',
            },
          },
          {
            title: '不含税金额（元）',
            dataIndex: 'amountExcludingTaxText',
            align: 'left',
            ellipsis: true,
            width: '150px',
            scopedSlots: {
              customRender: 'amountExcludingTaxText',
            },
          },

          {
            title: '本单入库合格品(F)',
            dataIndex: 'goodsQualifiedNumTextAssistUnit',
            align: 'left',
            ellipsis: true,
            width: '250px',
            scopedSlots: {
              customRender: 'goodsQualifiedNumTextAssistUnit',
            },
          },
          {
            title: '本单入库报废品(F)',
            dataIndex: 'goodsScrapNumTextAssistUnit',
            align: 'left',
            ellipsis: true,
            width: '250px',
            scopedSlots: {
              customRender: 'goodsScrapNumTextAssistUnit',
            },
          },
          {
            title: '明细是否删除',
            dataIndex: 'isDeleteText',
            align: 'left',
            width: '120px',
            ellipsis: true,
            scopedSlots: {
              customRender: 'isDeleteText',
            },
          },
        ]
      }
      let obj = {
        id: this.parentId,
      }
      queryByIdApi(obj).then((res) => {
        if (res.success) {
          if (res.result) {
            this.detailInfo = res.result
            console.log(this.detailInfo, '---this.detailInfo')
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
      let reportObj = {
        id: this.parentId,
        pageNo: this.reportPagination.current,
        pageSize: this.reportPagination.pageSize,
      }
      this.getReportData(reportObj)
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.pubColor {
  font-size: 14px;
  color: #1890ff;
  // cursor: pointer;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  .wrapLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .detail-item {
      flex: 1;
    }
  }
  .wrapRight {
    width: 116px;
    .detail-item {
      .subtitle {
        text-align: right;
      }
      .secondary-text {
        text-align: right;
      }
    }
  }
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}

.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px 0 24px -40px;
}
.cards-box {
  height: calc(100vh - 360px);
  overflow-y: scroll;
}
.title {
  span {
    font-size: 14px;
    color: #888888;
  }
}
.haveDelete {
  display: inline-block;
  box-sizing: border-box;
  padding: 2px 5px;
  background-color: #ffd0cc;
  color: #ff2b0b;
  border-radius: 2px;
  border: 1px solid #f5f5f5;
  margin-left: 16px;
}
</style>
